<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../../commons/taglibs.jsp"%>
<%@ include file="../../commons/list.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <style type="text/css">
  	.layui-form-text{
  		width: 300px;
  		float: left;
  	}
  </style>
</head>
<body>
<form class="layui-form" action="">
	<input type="hidden" name = "entityId" value="${carDiscount.id }">
	
     <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	  	<legend>第一张图片</legend>
	 </fieldset>     
	 
	 <div class="layui-form-item">
	     <label class="layui-form-label">第一张图片</label>
	     <div class="layui-input-inline">
	         <input type="hidden" name="firstimg" readonly  id="inputimgurl1" placeholder="图片地址" value="${firstimg }" class="layui-input">
	     </div>
	     <div class="layui-input-inline">
	         <div class="layui-upload-list" style="margin:0">
	             <img src="${carDiscount.firstimg }" id="srcimgurl1" height="100px" width="200px" class="layui-upload-img">
	         </div>
	     </div>
	     <div class="layui-input-inline layui-btn-container" style="width: auto;padding-left: 10px">
	         <a class="layui-btn layui-btn-primary" id="editimg1">修改图片</a >
	         <a class="layui-btn layui-btn-danger" id="clean1">清除</a >
	         <a class="layui-btn" id="editimg11">图片说明</a >
	     </div>
	     
	      <label class="layui-form-label">小图片</label>
	     <div class="layui-input-inline">
	         <input type="hidden" name="firstimgsmall" readonly  id="firstimgsmall" placeholder="图片地址" value="${firstimgsmall }" class="layui-input">
	     </div>
	     <div class="layui-input-inline">
	         <div class="layui-upload-list" style="margin:0">
	             <img src="${carDiscountDetail.firstimgsmall }" id="srcimgurlSmall1" height="100px" width="200px" class="layui-upload-img">
	         </div>
	     </div>
	     
	      <div style="width: 300px;float: left;">
		    <label class="layui-form-label">文本域</label>
		    <div class="layui-input-block">
		      <textarea name="firsttext" id='firsttext' placeholder="请输入内容" class="layui-textarea" >${carDiscountDetail.firsttext }</textarea>
		    </div>
	  	</div>
	 </div>
	 
  	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	  <legend>第二张图片</legend>
	</fieldset>
	     
 	  <div class="layui-form-item">
	     <label class="layui-form-label">第二张图片</label>
	     <div class="layui-input-inline">
	         <input type="hidden" name="secondimg" readonly  id="inputimgurl2" placeholder="图片地址" value="${secondimg }" class="layui-input">
	     </div>
	     <div class="layui-input-inline">
	         <div class="layui-upload-list" style="margin:0">
	             <img src="${carDiscount.secondimg }" id="srcimgurl2" height="100px" width="200px" class="layui-upload-img">
	         </div>
	     </div>
	     <div class="layui-input-inline layui-btn-container" style="width: auto;padding-left: 10px">
	         <a class="layui-btn layui-btn-primary" id="editimg2">修改图片</a >
     	     <a class="layui-btn layui-btn-danger" id="clean2">清除</a >
	         <a class="layui-btn" id="editimg21">图片说明</a >
	     </div>
	     
	      <label class="layui-form-label">小图片</label>
	     <div class="layui-input-inline">
	         <input type="hidden" name="secondimgsmall" readonly  id="secondimgsmall" placeholder="图片地址" value="${secondimgsmall }" class="layui-input">
	     </div>
	     <div class="layui-input-inline">
	         <div class="layui-upload-list" style="margin:0">
	             <img src="${carDiscountDetail.secondimgsmall }" id="srcimgurlSmall2" height="100px" width="200px" class="layui-upload-img">
	         </div>
	     </div>
	     
		 <div style="width: 300px;float: left;">
		    <label class="layui-form-label">文本域</label>
		    <div class="layui-input-block">
		      <textarea name="secondtext" id='secondtext' placeholder="请输入内容" class="layui-textarea" >${carDiscountDetail.secondtext }</textarea>
		    </div>
	  	</div>
	 </div>  
	 

	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	  <legend>第三张图片</legend>
	</fieldset> 

	  <div class="layui-form-item">
	     <label class="layui-form-label">第三张图片</label>
	     <div class="layui-input-inline">
	         <input type="hidden" name="thirdimg" readonly  id="inputimgurl3" placeholder="图片地址" value="${thirdimg }" class="layui-input">
	     </div>
	     <div class="layui-input-inline">
	         <div class="layui-upload-list" style="margin:0">
	             <img src="${carDiscount.thirdimg }" id="srcimgurl3" height="100px" width="200px" class="layui-upload-img">
	         </div>
	     </div>
	     <div class="layui-input-inline layui-btn-container" style="width: auto;padding-left: 10px">
	         <a class="layui-btn layui-btn-primary" id="editimg3">修改图片</a >
	         <a class="layui-btn layui-btn-danger" id="clean3">清除</a >
	         <a class="layui-btn" id="editimg31">图片说明</a >
	     </div>
	     
	      <label class="layui-form-label">小图片</label>
	     <div class="layui-input-inline">
	         <input type="hidden" name="thirdimgsmall" readonly  id="thirdimgsmall" placeholder="图片地址" value="${thirdimgsmall }" class="layui-input">
	     </div>
	     <div class="layui-input-inline">
	         <div class="layui-upload-list" style="margin:0">
	             <img src="${carDiscountDetail.thirdimgsmall }" id="srcimgurlSmall3" height="100px" width="200px" class="layui-upload-img">
	         </div>
	     </div>
	     
	     <div style="width: 300px;float: left;">
		    <label class="layui-form-label">文本域</label>
		    <div class="layui-input-block">
		      <textarea name="thirdtext" id='thirdtext' placeholder="请输入内容" class="layui-textarea" >${carDiscountDetail.thirdtext }</textarea>
		    </div>
	  	</div>
	 </div>  
	  
	  <div class="layui-form-item">
	    <div class="layui-input-block">
	      <button class="layui-btn" id='tjsub' lay-submit lay-filter="formDemo">立即提交</button>
	    </div>
	  </div>
</form> 
	 
<script>
layui.config({
    base: '<%=basePath%>common/cropper/' 
    }).use(['form','croppers','croppers1','croppers2','croppers3','croppers4','croppers5'], function () {
    var $ = layui.jquery
        ,form = layui.form
        ,croppers = layui.croppers
        ,croppers1 = layui.croppers1
        ,croppers2 = layui.croppers2
        ,croppers3 = layui.croppers3
        ,croppers4 = layui.croppers4
        ,croppers5 = layui.croppers5 
        ,layer= layui.layer;

    //创建一个头像上传组件
    croppers.render({
        elem: '#editimg1'
        ,saveW:726     //保存宽度
        ,saveH:500
        ,mark:14.5/10    //选取比例
        ,area:['900px', '550px']  //弹窗宽度
        ,url: "<%=basePath%>controller/carDiscount/uploadFirstPng/"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
        ,done: function(url){ //上传完毕回调
        	var lastIndexOf = url.lastIndexOf("/");
            var img = url.substring(lastIndexOf+1,url.length);
            $("#inputimgurl1").val(img);
            $("#srcimgurl1").attr('src',url);
        }
    });
    
     //创建一个头像上传组件
    croppers1.render({
        elem: '#editimg2'
   	 	,saveW:726     //保存宽度
        ,saveH:500
        ,mark:14.5/10    //选取比例
        ,area:['900px', '550px']  //弹窗宽度
        ,url: "<%=basePath%>controller/carDiscount/uploadSecondPng/"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
        ,done: function(url){ //上传完毕回调
        	var lastIndexOf = url.lastIndexOf("/");
            var img = url.substring(lastIndexOf+1,url.length);
            $("#inputimgurl2").val(img);
            $("#srcimgurl2").attr('src',url);
        }
    });  
     
    //创建一个头像上传组件
    croppers2.render({
         elem: '#editimg3'
    	 ,saveW:726     //保存宽度
         ,saveH:500
         ,mark:14.5/10    //选取比例
         ,area:['900px', '550px']  //弹窗宽度
         ,url: "<%=basePath%>controller/carDiscount/uploadThirdPng/"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
         ,done: function(url){ //上传完毕回调
        	 var lastIndexOf = url.lastIndexOf("/");
             var img = url.substring(lastIndexOf+1,url.length);
             $("#inputimgurl3").val(img);
             $("#srcimgurl3").attr('src',url);
         }
     }); 
    
  //创建一个头像上传组件
    croppers3.render({
         elem: '#editimg11'
    	 ,saveW:702     //保存宽度
         ,saveH:176
         ,mark:4.129/1    //选取比例
         ,area:['900px', '550px']  //弹窗宽度
         ,url: "<%=basePath%>controller/carDiscount/uploadThirdPng/"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
         ,done: function(url){ //上传完毕回调
        	 var lastIndexOf = url.lastIndexOf("/");
             var img = url.substring(lastIndexOf+1,url.length);
             $("#firstimgsmall").val(img);
             $("#srcimgurlSmall1").attr('src',url);
         }
     });
  
  //创建一个头像上传组件
    croppers4.render({
         elem: '#editimg21'
    	 ,saveW:702     //保存宽度
         ,saveH:176
         ,mark:4.129/1    //选取比例
         ,area:['900px', '550px']  //弹窗宽度
         ,url: "<%=basePath%>controller/carDiscount/uploadThirdPng/"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
         ,done: function(url){ //上传完毕回调
        	 var lastIndexOf = url.lastIndexOf("/");
             var img = url.substring(lastIndexOf+1,url.length);
             $("#secondimgsmall").val(img);
             $("#srcimgurlSmall2").attr('src',url);
         }
     });
  
    //创建一个头像上传组件
    croppers5.render({
         elem: '#editimg31'
    	 ,saveW:702     //保存宽度
         ,saveH:176
         ,mark:4.129/1    //选取比例
         ,area:['900px', '550px']  //弹窗宽度
         ,url: "<%=basePath%>controller/carDiscount/uploadThirdPng/"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
         ,done: function(url){ //上传完毕回调
        	 var lastIndexOf = url.lastIndexOf("/");
             var img = url.substring(lastIndexOf+1,url.length);
             $("#thirdimgsmall").val(img);
             $("#srcimgurlSmall3").attr('src',url);
         }
     });
    
    
     var form = layui.form;
	  
	  //监听提交
	  form.on('submit(formDemo)', function(data){
	  	//提交成功后禁用按钮
		$("#tjsub").css("pointer-events","none"); 
		var infoDdata = JSON.parse(JSON.stringify(data.field));
		if(infoDdata.firstimg != "" && (infoDdata.firstimgsmall == "" || infoDdata.firsttext == "")){
			layer.msg('图片一的小图片或者文字不能为空', {time:1000}); 
			$("#tjsub").css("pointer-events","auto");
			return false;
		}
		
		if(infoDdata.secondimg != "" && (infoDdata.secondimgsmall == "" || infoDdata.secondtext == "")){
			layer.msg('图片二的小图片或者文字不能为空', {time:1000}); 
			$("#tjsub").css("pointer-events","auto");
			return false;
		}
		
		if(infoDdata.thirdimg != "" && (infoDdata.thirdimgsmall == "" || infoDdata.thirdtext == "")){
			layer.msg('图片三的小图片或者文字不能为空', {time:1000}); 
			$("#tjsub").css("pointer-events","auto");
			return false;
		}
		
	    $.post("<%=basePath%>/controller/carDiscount/save",data.field,function (data){
	    	if(data == '0'){
	    		$("#tjsub").css("pointer-events","auto");
	    		layer.msg('提交成功', {time:1000}); 
	    		setTimeout("window.location.reload();",1500); 
	    	}else{
	    		$("#tjsub").css("pointer-events","auto");
	    		layer.msg('提交失败', {time:1000}); 
	    	}
	    })
	    return false;
	  });
    
	$("#clean1").click(function(){
		$("#inputimgurl1").val("");
		$("#firstimgsmall").val("")
		$("#firsttext").val("")
		$("#srcimgurl1").attr('src',"");
		$("#srcimgurlSmall1").attr('src',"");
		form.render();
	})
	$("#clean2").click(function(){
		$("#inputimgurl2").val("");
		$("#secondimgsmall").val("")
		$("#secondtext").val("")
		$("#srcimgurl2").attr('src',"");
		$("#srcimgurlSmall2").attr('src',"");
		form.render();
	})
	$("#clean3").click(function(){
		$("#inputimgurl3").val("");
		$("#thirdimgsmall").val("")
		$("#thirdtext").val("")
		$("#srcimgurl3").attr('src',"");
		$("#srcimgurlSmall3").attr('src',"");
		form.render();
	})
});

</script>

</body>
</html>
